Vue.component('table-drag-modal', {
  template: ` 
             <div class="yb-modal-wrapper" v-show="value">
               <div class="yb-modal-container">
                 <div class="yb-modal">
                   <div class="yb-modal-header-container">
                     <div class="yb-modal-title-container">自定义设置列表字段</div>
                     <span class="yb-modal-close" @click="$emit('input', false)"></span>
                   </div>
                   <div class="yb-modal-body">
                     <div style="display: flex; align-items: center;">
                       <span class="iconfont icon-zhuyi" style="font-size: 20px; color: #17C48D;"></span>
                       <span style="color: #999999; font-size: 14px;">勾选展示对应列，拖动调整展示顺序</span>
                     </div>
                     <div class="drag-box">
                       <div class="title">
                         <span>冻结列</span>
                         <span>(最多展示4项)</span>
                       </div>
                       <draggable v-model="leftCols" filter=".not-drag" group="site" animation="100" :move="moveLeftCols" @add="addLeftCols">
                         <transition-group>
                          <div class="item" :class="getClass(item)" v-for="item in leftCols" :key="item.$index">
                            <input class="yb-checkbox" :disabled="item.required" type="checkbox" v-model="item.show">
                            <span><span v-html="item.name"></span>{{ item.required ? '（必选）' : '' }}</span>
                          </div>
                         </transition-group>
                       </draggable>
                     </div>
                     <div class="drag-box">
                       <div class="title">
                         <span>滚动展示列</span>
                         <span></span>
                       </div>
                       <draggable v-model="activeCols" group="site" animation="100" @add="addActiveCols">
                         <transition-group>
                          <div class="item" :class="item.fixable ? '' : 'disabled'" v-for="item in activeCols" :key="item.$index">
                            <input type="checkbox" :disabled="item.required" class="yb-checkbox" v-model="item.show">
                            <span><span v-html="getValue(item.name)"></span>{{ item.required ? '（必选）' : '' }}</span>
                          </div>
                         </transition-group>
                       </draggable>
                     </div>
                     <div class="drag-box">
                       <div class="title">
                         <span>冻结列</span>
                         <span></span>
                       </div>
                       <div class="item disabled" v-for="item in rightCols" :key="item.$index">
                         <input type="checkbox" class="yb-checkbox" :disabled="item.required" v-model="item.show">
                         <span><span v-html="item.name"></span>{{ item.required ? '（必选）' : '' }}</span>
                       </div>
                     </div>
                   </div>
                   <div class="yb-modal-footer">
                     <button class="yb-button" type="plain" @click="resetData(columns)">恢复默认</button>
                     <button class="yb-button" type="gray" @click="cancel">取消</button>
                     <button class="yb-button" type="green" @click="confirm">确定</button>
                   </div>
                 </div>
               </div>
             </div>
            `,
  emits: ['confirm'],
  props: {
    value: false
  },
  data() {
    return {
      // 原始
      columns: [],
      // 当前
      lastColumns: [],
      leftCols: [],
      activeCols: [],
      rightCols: []
    }
  },
  methods: {
    setColumns(columns, lastColumns) {
      if (columns) {
        // 封装原始值
        this.columns = [];
        columns.forEach(item => {
          this.columns.push({
            $index: item.$index,
            name: item.name,
            required: item.required,
            show: item.show,
            fixed: item.fixed,
            fixable: item.fixable,
            type: item.type,
            width: item.width
          })
        });
      }
      if (lastColumns) {
        // 封装最新值
        this.lastColumns = [];
        lastColumns.forEach(item => {
          this.lastColumns.push({
            $index: item.$index,
            name: item.name,
            required: item.required,
            show: item.show,
            fixed: item.fixed,
            fixable: item.fixable,
            type: item.type,
            width: item.width
          })
        })
        this.resetData(this.lastColumns);
      }
    },
    getClass(item) {
      return {
        disabled: !item.fixable,
        'not-drag': item.type == 'index'
      }
    },
    getValue(val) {
      if (val instanceof Function) {
        return val();
      }
      return val;
    },
    moveLeftCols(e) {
      return e.relatedContext.element.type != 'index';
    },
    addLeftCols(e) {
      let newItem = this.leftCols[e.newIndex];
      if (newItem.fixable && this.leftCols.length < 5) {
        // 如果是可以修改，则不做操作
        newItem.fixed = 'left';
        return;
      }
      this.leftCols.splice(e.newIndex, 1)[0];
      this.activeCols.splice(e.oldIndex, 0, newItem);
    },
    addActiveCols(e) {
      let newItem = this.activeCols[e.newIndex];
      if (newItem.fixable && this.activeCols.length > 0) {
        // 如果是可以修改，则不做操作
        newItem.fixed = '';
        return;
      }
      this.activeCols.splice(e.newIndex, 1)[0];
      this.leftCols.splice(e.oldIndex, 0, newItem);
    },
    // 恢复默认
    resetData(columns) {
      this.leftCols = [];
      this.rightCols = [];
      this.activeCols = [];
      columns.forEach((item, index) => {
        let col = {
          ...item
        }
        if (item.type == 'selection') return;
        if (item.fixed == 'left') {
          this.leftCols.push(col);
        } else if (item.fixed == 'right') {
          this.rightCols.push(col);
        } else {
          this.activeCols.push(col);
        }
      });
    },
    cancel() {
      this.$emit('input', false);
      this.resetData(this.lastColumns);
    },
    confirm() {
      this.lastColumns = [...this.leftCols, ...this.activeCols, ...this.rightCols];
      this.$emit('confirm', this.lastColumns);
      this.$emit('input', false);
    }
  }
});
